<template>
	<view class="customHeader">
		<view class="headerBg">
			<!-- <image src="../static/bg.jpg" mode="widthFix"></image> -->
			<!-- <img src="../static/bg.jpg" mode="widthFix"></img> -->
			<img :src="$Utils.onlineImg('bg.jpg')" mode="widthFix"></img>
		</view>
		<view class="headers">
			<!-- <image class="innerImg" src="../static/bg.jpg" mode="widthFix" style="width: 750rpx;"></image> -->
			<!-- 			<img class="innerImg" src="../static/bg.jpg" mode="widthFix" style="width: 750rpx;"></img> -->
			<img class="innerImg" :src="$Utils.onlineImg('bg.jpg')" mode="widthFix" style="width: 750rpx;"></img>
			<text class="headersT">{{title}}</text>
			<text class="iconfont icon-zuojiantou" @click="goBack" v-if="isBack"></text>
		</view>
		<view class="headerFill"></view>

	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: "",
			},
			isBack: {
				type: Boolean,
				default: true,
			},
			naviBack: {
				type: Function,
				default: function() {
					uni.navigateBack({

					})
				}
			}
		},
		data() {
			return {}
		},
		methods: {
			goBack() {
				this.naviBack();
			},
		}
	}
</script>

<style>
	.customHeader {
		color: #FFFFFF;
		/* color: pink; */
		background-color: transparent;
		height: 88rpx;
		overflow: hidden;
	}

	.headers {
		height: 88rpx;
		width: 750rpx;
		position: fixed;
		top: 0;
		text-align: center;
		line-height: 88rpx;
		background-color: transparent;
		z-index: 2;
		overflow: hidden;

	}

	.headersT {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
	}

	.innerImg {
		width: 750rpx;
		position: absolute;
		top: -40rpx;
		left: 0;
		z-index: 0;
	}

	.iconfont,
	.icon-zuojiantou {
		position: absolute;
		left: 24rpx;
	}

	.headerFill {
		height: 88rpx;
		width: 750rpx;
	}

	.headerBg {
		width: 750rpx;
		position: fixed;
		top: -40rpx;
		z-index: 0;
	}

	.headerBg image,
	.headerBg img {
		width: 750rpx;
	}
</style>
